<template>
	<view class="my-userinfo-container">
		<view class="top-box">
			<image :src="userdata.user_img" class="avatar"></image>
			<view class="nickname">{{userdata.user_name}}</view>
		</view>
		<view  class="panel-list">
			<view class="panel">
				<view class="panel-list-item" >
					<button style="width: 100%;text-align: left;border-radius: 100px;
			margin: 0 0 10px;" @click="gotokf">联系客服                         
						<uni-icons type="arrowright" size="15" ></uni-icons>
					</button>
					
				</view>
				<view class="panel-list-item">
					<button style="width: 100%;text-align: left;border-radius: 100px;
			margin: 0 0 10px;" @click="gotodt">知识竞答
						<uni-icons type="arrowright" size="15" ></uni-icons>
					
					</button>
				</view>
			</view>
		</view>
	</view>
	
</template>
<script>
	export default{

		data(){
			return{
				
				
			};
		},
		methods:{
			gotokf(){
				this.$emit('gotokf')
			},
			gotodt(){
				this.$emit('gotodt')
				
			}
		},
		props:['userdata']
		
		
	
	}
	
</script>
<style lang="scss">
	.my-userinfo-container{
		height: 100%;
		background-color: #f4f4f4;
		
		.top-box{
			height: 400rpx;
			background-color: #00ffff;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.avatar{
				width: 90px;
				height: 90px;
				border-radius: 45px;
				border: 2px solid #fff;
				box-shadow: 0 1px 5px black;
			}
			.nickname{
				font-size: 16px;
				color: #fff;
				font-weight: bold;
				margin-top: 10px;
			}
			
		}
	}
	.panel-list{
		padding: 0 10px;
		position: relative;
		top: -10px;
		
		.panle{
			background-color: white;
			border-radius: 3px;
			margin-bottom: 8px;
			
			
		}
		.panel-list-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 15px;
			padding: 0 10px;
			line-height: 45px;
		}
	}
	
</style>
